<template>
    <div class="person">
        <h2>当前求和为:{{ sum }}，放大10倍后值为：{{ bigSum }}</h2>
        <button @click="add">sum+1</button>
        <hr>
        <img v-for="dog,index in dogList" :key="index" :src="dog" alt="">
        <br>
        <button @click="addDog">添加一条狗</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    import useSum from '@/hooks/useSum';
    import useDog from '@/hooks/useDog';

    const {sum,add,bigSum} = useSum()
    const {dogList,addDog} = useDog()
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px
    }
    li{
        font-size: 20px;
    }
    img{
        width: 200px;
        margin-right: 10px;
    }
</style>